Astro Development Standards

Official Documentation

Untuk dokumentasi lengkap, kunjungi Astro Documentation.

Local Environment Setup

Setup lengkap environment development Astro (package manager, Biome/ESLint, Lefthook, Content Collections, testing, CI/CD) → astro-local-env|Astro Local Environment Setup

Project Layout

project
- src
  - assets/ # Static assets
    
    styles/ # Global CSS
    
    global.css
    
    tokens.css
    
    images
    
    fonts
  - features/ # Feature components
    
    home
    
    components
    
    views
    
    types.ts
  - components/ # UI components (.astro / .tsx)
    
    shell
    
    layout
    
    shared
  - layouts/ # Page layouts
  - pages/ # Routing
  - content/ # Content collections
  - lib/ # Utils
  - content.config.ts
- public/ # Static assets
- astro.config.mjs
- package.json

Island Architecture

Gunakan framework components hanya untuk interaktif area.

---
// Mostly static page
import BaseLayout from "../layouts/Base.astro";
---

<BaseLayout>
  <h1>Welcome</h1>
  <!-- Static content here -->

  <!-- Interactive island -->
  <Counter client:load />
  <Search client:idle />
</BaseLayout>

Content Collections

Gunakan content collections untuk blog, wiki, docs:

// src/content.config.ts
import { defineCollection, z } from "astro:content";

const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    pubDate: z.date(),
    tags: z.array(z.string()),
  }),
});

export const collections = { blog };

---
import { getCollection } from "astro:content";
const posts = await getCollection("blog");
---

<ul>
  {
    posts.map((p) => (
      <li>
        <a href={`/blog/${p.id}`}>{p.data.title}</a>
      </li>
    ))
  }
</ul>

Routing

File-based routing di src/pages/.
Dynamic routes: [id].astro, [...slug].astro.
API routes: src/pages/api/*.ts dengan export GET, export POST, dll.

Styling

Tailwind CSS default untuk styling.
Scoped styles di .astro files:

<style>
  h1 {
    color: blue;
  }
</style>

Deployment

Static: output: 'static' (default) — deploy ke Vercel, Cloudflare Pages, GitHub Pages.
SSR: output: 'server' dengan adapter (Vercel, Node).

Dev Command

# Dev server
astro dev

# Background mode
astro dev --background
astro dev stop
astro dev status
astro dev logs